<template>
    <require from="./em-project-edit-member.less"></require>
    <div class="em-project-edit-member">
        <div ref="frm" class="ui form">
            <div class="field">
                <label>项目成员(${project.members.length})</label>
                <div ref="membersRef" class="ui fluid multiple search selection dropdown">
                    <input type="hidden" name="members">
                    <i class="dropdown icon"></i>
                    <div class="default text"></div>
                    <div class="menu">
                        <div repeat.for="item of users | sortUsers:project.leader.username" task.bind="initMembersUI($last)" class="item" data-value="${item.username}">
                            <span class="${project.leader.username == item.username ? 'owner' : ''} ${!item.enabled ? 'disabled-user' : ''}">${item.name ? item.name : item.username}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="member-table">
            <table class="ui very basic striped compact table">
                <thead>
                    <tr>
                        <th><i class="at icon" style="margin-right: 0;"></i>用户名</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>登录</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr repeat.for="item of project.members | sort:'username'">
                        <td><i class="at icon" style="margin-right: 0;"></i>${item.username}</td>
                        <td>${item.name}</td>
                        <td>${item.mails}</td>
                        <td title="${item.lastLoginDate | date}">${item.lastLoginDate | timeago}</td>
                        <td if.bind="item.enabled">
                            <div class="ui green tag label">启用中</div>
                        </td>
                        <td if.bind="!item.enabled">
                            <div class="ui red tag label">已停用</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
